<template>
    <div class="big">
        <!-- <h1>我的关注页</h1> -->
        <div class="box">
            <van-nav-bar left-text="返回" left-arrow @click-left="$router.back()" />
        </div>
        <div class="content">
            <h1>我的关注</h1>
            <div class="title">
                <span><van-icon name="clock-o" /> 时间</span>
                <span>13:00-17:30 开放</span>
            </div>
            <div class="title">
                <span><van-icon name="location-o" /> 位置</span>
                <span @click="$router.push('/map')">美食区 11F > </span>
            </div>
            <div class="aside">
                <h3>景点介绍</h3>
                <p>
                    天坛公园在北京市南部，东城区永定门内大街东侧。占地约273万平方米。
                </p>
                <br>
                <p>
                    天坛公园，是明清两代皇帝每年祭天和祈祷五谷丰收的地方。天坛以严谨的建筑布局、奇特的建筑构造和瑰丽的建筑装饰著称于世。总占地面积约270万平方米，分为内坛和外坛。主要建筑物在内坛，南有圜丘坛、皇穹宇，北有祈年殿、皇乾殿，由一条贯通南北的通道——丹陛桥，把这二组建筑连接起来。外坛古柏苍郁，环绕着内坛，使主要建筑群显得更加庄严宏伟。坛内还有巧妙运用声学原理建造的回音壁、三音石、对话石等，充分显示出古代中国建筑工艺的发达水平。天坛公园，是中国保存下来的最大祭坛建筑群。
                </p>
                <br>

                <br>
                <p>
                    天坛有坛墙两重，形成内外坛，均为北圆南方。当初，为了把天地的形象表现在墙上，以象征“天圆地方”之说。
                </p>
            </div>
        </div>
        <div class="btnBox">
            <van-button round type="warning" size="large" @click="care"> ❤️ 点击购票</van-button>
        </div>
    </div>
</template>
  
<script setup>
import { showSuccessToast, showFailToast } from 'vant';


let care = () => {
    showSuccessToast('购票成功');
    console.log(111);
}
</script>
  
<style lang="scss" scoped>
.big {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: auto;

    .box {
        width: 375px;
        height: 281px;
        background: url('https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00056-3783.jpg') 100%/cover;

        .van-nav-bar {
            background: transparent;
            color: white;
        }
    }

    .content {
        flex: 1;
        overflow: auto;
        padding: 0 10px;

        //   border-top-right-radius:25px;
        //   border-top-left-radius: 25px;
        // border: 1px solid black;
        h1 {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .title {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        h3 {
            height: 40px;
            line-height: 40px;
        }

        p {
            text-indent: 24px;
        }
    }

    .btnBox {
        height: 50px;
        width: 375px;
        padding: 5px 10px;

        .van-button {
            width: 90%;
        }
    }
}
</style>